<template>
  <footer v-show="footerShow">
    <div
      class="code"
      :style="{
        backgroundImage: `url(${store.state.BaseUrl}frontUploads/footerCode.jpg)`,
      }"
    ></div>
    <div class="footerText" v-html="store.state.frontData.footer"></div>
  </footer>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { inject, ref, watch } from 'vue'
const store: any = inject('store')
store.GetFrontData()
const footerShow = ref<boolean>(true)
const route = useRoute()
const cannotShowFooter: string[] = ['/home/search', '/login', '/message']

watch(
  () => route.path,
  (path: string) => {
    if (cannotShowFooter.includes(path)) footerShow.value = false
    else footerShow.value = true
  },
  {
    immediate: true,
  }
)
</script>
<style scoped lang="scss">
footer {
  height: 100px;
  width: 100%;
  position: relative;
  background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  animation: footerBg 3s infinite linear alternate;
  transition: all 1s;
  padding-right: 100px;

  .footerText {
    height: 100%;
    width: 100%;
    color: #eee;
    font-size: 14px;
    text-align: center;
    line-height: 2;
    padding: 35px 20px 0;
  }

  .code {
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
  }
}

@keyframes footerBg {
  0% {
    background: #ce3e75;
  }

  25% {
    background: #ee7752;
  }

  50% {
    background: #ce3e75;
  }

  75% {
    background: #23a6d5;
  }

  100% {
    background: #23d5ab;
  }
}

@media (max-width: 760px) {
  footer {
    height: 60px;
    padding-right: 60px;

    .code {
      height: 60px;
      width: 60px;
    }

    .footerText {
      font-size: 12px;
      padding-top: 10px;
    }
  }
}
</style>
